<template>
	<view>
		<u-navbar back-text="" back-icon-color="#000000" :title="name" :border-bottom="false" title-color="#000000"
		 :background="background"></u-navbar>
		 <view class="image_text">
			 <image src="../static/blind_bg11.png"></image>
		 </view>
		<canvas id="myCanvas" canvas-id="firstCanvas"></canvas>
		<button class="button" @click="save_but">
			保存图片
		</button>
		<view class="img">
			<image src="../static/b3.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				name: "分享盲盒",
				ewm: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg',
				id:'',
				sweet_coin:'',
				username:'',
				title:'',
				icon:'',
				getStatus:'',
			}
		},
		onLoad(option) {
			than = this;
			than.id = option.state
		},
		onReady: function(e) {
			than.post("api/share/giftDetails", {
				id:than.id
			}, function(data) {					
				console.log(data)
				than.sweet_coin = data.sweet_coin
				than.ewm = data.invite_picture
				than.username = data.username
				than.title = data.title
				than.icon = than.img_pre + data.icon
				than.getStatus = data.getStatus
				than.copyFn()
			})
			
		},
		methods: {
			
			save_but() {
				uni.showLoading();
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						than.download(res.tempFilePath)
					},
					fail: function(res) {
						console.log(res);
					}
				})
				
				if(than.getStatus == 1){
					console.log("aaa")
				}else{
					than.post("api/share/share", {	
					}, function(data) {	
						
					})
				}
			},
			copyFn() {
				let _this = this
				let c_width, h_width;
				const query = uni.createSelectorQuery().in(this);
				query.select('#myCanvas').boundingClientRect(data => { //获取canvas-dom
					c_width = data.width; //准确的宽高
					h_width = data.height
					let context = uni.createCanvasContext('firstCanvas') //绑定画布			
					context.drawImage('../static/b8.png', 0, 0, c_width, h_width)
					context.setFontSize(11);
					
					// context.fillText('扫码右侧二维码，注册蜂盈优品', c_width / 13 , h_width * 0.87)
					context.drawImage(_this.icon, c_width / 3.5 , h_width / 25, c_width / 2.2, c_width / 2.2);
					context.drawImage(_this.ewm, c_width / 2.5 , h_width / 1.4, c_width / 5, c_width / 5);
					context.setFillStyle('#FF001F') //设置内容1的文字样式
					context.setFontSize(11);
					context.fillText('恭喜用户'+ than.username +'获得盲盒', c_width / 5.5 , h_width / 2.3)
					context.setFillStyle('#000000') //设置内容1的文字样式
					context.setFontSize(13);
					context.fillText(than.title, c_width / 5.5 , h_width / 2)
					context.fillText('及蜜贝'+ than.sweet_coin +'个', c_width / 5.5 , h_width / 1.8)
					context.setFillStyle('#FFE283') //设置内容1的文字样式
					context.setFontSize(11);
					context.fillText('长按识别二维码', c_width / 2.8 , h_width / 1.08)
					
					context.draw()
				}).exec();

			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FBE6BB;
	}
     
	.image_text{
		text-align: center;
		margin-top:20rpx;
		image{
			width: 527rpx;
			height:53rpx;
		}
	}
	#myCanvas {
		width: 570rpx;
		height: 740rpx;
		margin: auto;
		margin-top:30rpx;
	}

	.button {
		margin: 20rpx auto;
		margin-bottom: 30rpx;
		width: 245rpx;
		height: 84rpx;
		background: #FB683D;
		border-radius: 20rpx;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.img {
		text-align: center;
		padding-bottom: 20rpx;

		image {
			width: 678rpx;
			height: 232rpx;
		}
	}
</style>
